import React from 'react'
import './TodoFooter.css'
//导入仓库中的动作方法
import { asynccheckAlltodo, asyncclearAlltodos } from '../../../store/modules/todos'
//导入react-redux的钩子
import { useDispatch, useSelector } from 'react-redux'
export default function TodoFooter() {
    let dispatch = useDispatch();
    let todolists = useSelector(state => state);
    //声明事件函数
    let checkAll = done => {
        // console.log(done)
        dispatch(asynccheckAlltodo(todolists, done));
    }
    let cleartodos = () => {
        dispatch(asyncclearAlltodos(todolists))
    }
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox"
                    checked={todolists.every(item => item.done) && todolists.length > 0}
                    onChange={e => checkAll(e.target.checked)} />
            </label>
            <span>
                <span>已完成{todolists.filter(item => item.done).length}</span> / 全部{todolists.length}
            </span>
            <button className="btn btn-danger" onClick={cleartodos}>清除已完成任务</button>
        </div>
    )
}
